<template>
	<view>

		<view class="status_bar"></view>
		<!-- 头部 -->
		<view class="header">
			<view class="header-top">
				<image class="head-portrait " 
				src="../../static/logo.png" 
				@click="navigate('person')"></image>
				<view class="news">
					<view class="tl-l font-32">uniapp</view>
					<view class="font-22 m-t-26">手机：136xxxxxxxx</view>
				</view>
				<image class="set-up" 
				src="../../static/icon_img/设置.png" style="
				width: 47.05rpx;
				height: 47.05rpx;" 
				@click="navigate('user-set')">
				</imgae>
			<view class="header-bottom">
				<view class="money">
				<text style="
				font-size: 23rpx;
			 	font-weight: bold;">我的余额:</text>
				<text style="
				font-size: 31rpx; 
			 	margin-left: 18rpx; 
			 	font-weight: bold;">8.99</text>
				</view>
				<view class="cash-withdrawal" 
				style="font-size: 24rpx; 
			 	font-weight: bold;" 
				@click="navigate('Revenue management')">立即提现></view>
				</view>
			</view>

		</view>
		<!-- 分割线 -->
		<view class="boundary"></view>
		<!-- 服务菜单开始 -->
		<view class="card">
			<view class="title">
			<text style="
			font-size: medium;
			font-weight: bold;">服务</text>
			</view>
			<view class="boundary01"></view>
			<view class="list-box" style="">
				<view class="list"
				v-for="(item,index) in list" 
				:key="" 
				@click="navigate(item.path)">
					<image :src="item.src" 
						style="width: 66rpx;
						height: 70rpx; 
						margin: 0 auto;">
					</image>
					<view style="
						font-size: small;
						font-weight: bold;">{{item.content}}</view>
					</view>
			</view>
		</view>
		<view class="boundary"></view>
		<!-- 列表开始 -->
		<u-cell-group>
			<!-- <u-cell title="共享申请" :isLink="true" arrow-direction="right" value="审核中" ></u-cell> -->
			<u-cell title="共享申请" :isLink="true" arrow-direction="right" value="审核中" url="/pages/sharingApplication/sharingApplication"></u-cell>
			<u-cell title="账户设置" :isLink="true" arrow-direction="right" url="/pages/user-set/user-set"></u-cell>
			<u-cell title="关于我们" :isLink="true" arrow-direction="right" url="/pages/aboutUs/aboutUs"></u-cell>
		</u-cell-group>

	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				list: [{
						src: '../../static/icon_img/充电桩 (2).png',
						content: '我的充电桩',
						path: 'myCharger'
					},
					{
						src: '../../static/icon_img/总费用.png',
						content: '收益管理',
						path: 'Revenue management'
					},
					{
						src: '../../static/icon_img/优惠券.png',
						content: '优惠卷',
						path: 'coupon'
					},
					{
						src: '../../static/icon_img/客服.png',
						content: '客服中心',
						path: 'customerServiceCenter'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 页面跳转
			navigate(path) {
				if (!path) return
				uni.navigateTo({
					url: `/pages/${path}/${path}`
				});
			
			}


		}
	}
</script>

<style lang="scss" scope>
	// page{
	// 	background-color:#f1f2f8;
	// }
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.header {
		position: relative;
		display: flex;
		text-align: center;
		height: 350rpx;
		background-color: #2e99fa;

		.header-top {
			display: flex;
			text-align: center;

			.head-portrait {
				width: 127rpx;
				height: 127rpx;
				border-radius: 100%;
				margin-left: 31rpx;
				margin-top: 44rpx;
			}

			.set-up {
				position: absolute;
				right: 28.23rpx;
				top: 42rpx;

			}

			.news {
				margin-top: 57rpx;
				color: white;
				position: absolute;
				left: 192rpx;
			}

		}

		.header-bottom {
			position: absolute;
			display: flex;
			top: 222rpx;
			left: 0;
			right: 0;
			color: white;
			justify-content: space-between;

			.money {
				padding-left: 35rpx;

			}

			.cash-withdrawal {
				margin-right: 48rpx;
			}
		}
	}
	.card{
		.title{
			display: flex;
			text-align: center;
			justify-content: space-between;
			margin: 37rpx 0 27rpx 33rpx ;
		}
		.list-box{
			display: flex;
			text-align: center;
			margin-top:35rpx ;
			.list{
				flex: 1;
				display: flex;
				flex-direction: column!important;
				text-align: center;
				justify-content: center;
				margin-bottom: 22rpx;}
		}
		
	}
	.boundary {
		width: 750rpx;
		height: 20rpx;
		background-color: #f1f2f8;
	}
	.boundary01{
		background-color: #f1f1f1;
		height: 3rpx;
		width:690rpx;
		margin: 0 auto;
	}
	
// 修改uView默认字体样式
	.u-cell__body /deep/ .u-cell__value.data-v-e835eb80 {
		color: #606266;
		text-align: right;
		font-size: 21rpx;
		font-weight: bold;
	}
</style>
